<template>
  <div class="record-voice">
    <div class="list">
      <div class="cell" v-for="(item, index) in list" :key="index">
        <div class="icon-wrapper">
          <img src="@/assets/image/voice-icon.png" alt=""/>
          <p class="status is-end" v-if="item.isEnd">已完成</p>
          <p class="status no-end" v-else>未完成</p>
        </div>
        <div class="cell-center">
          <div class="author">创作者：{{ item.author }}</div>
          <div class="template duration">模板时长：12-15秒</div>
          <div class="template" v-if="item.audioDuration">拍摄时长：{{ item.audioDuration }}秒</div>
        </div>
        <div class="cell-right">
          <p class="record" v-if="!item.isEnd">录制</p>
         
          <img 
            v-if="item.isEnd"
            src="@/assets/image/play-audio.png" alt="" class="record-img"/>
          <img 
            v-if="item.isEnd"
            src="@/assets/image/del-audio.png" alt="" class="record-img"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          author: '田田',
          isEnd: false,
          time: [10-15]
        },
        {
          author: '棒棒糖',
          isEnd: true,
          time: [10-15],
          audioDuration: 8
        },
      ]
    }
  },
}
</script>

<style scoped>
.template {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: normal;
  color: #666666;
}
.duration {
  margin-bottom: 1.33vw;
}
.cell-center {
  flex: 1;
}
.record-img {
  width: 7.2vw;
  height: 7.2vw;
}
.record-img:nth-of-type(1) {
  margin-right: 5.33vw;
}
.author {
  margin-bottom: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 5.33vw;
  color: #333333;
}
.record {
  width: 22.4vw;
  height: 7.47vw;
  line-height: 7.47vw;
  border-radius: 3.73vw;
  background: #0A67FF;
  text-align: center;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  color: #FFFFFF;
}
.cell-right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22.4vw;
  height: 7.47vw;
}
.icon-wrapper {
  margin-right: 2.13vw;
}
.icon-wrapper > img {
  display: block;
  height: 10.13vw;
  width: 10.13vw;
}
.no-end {
  background: #FF7628;
}
.is-end {
  background: #008924;
}
.status {
  position: absolute;
  bottom: -1vw;
  left: 0;
  width: 16.53vw;
  height: 5.87vw;
  line-height: 5.87vw;
  text-align: center;
  border-radius: 2.93vw;
  text-align: center;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16.53vw;
  height: 16.53vw;
  border-radius: 2.13vw;
  background: #000;
}
.cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 89.6vw;
  height: 21.33vw;
  margin: 0 auto 3.2vw;
  box-sizing: border-box;
  padding: 0 3.2vw 0 2.13vw;
  background: #fff;
  border-radius: 2.13vw;
}
</style>